<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎访问小兔儿鲜网</title>
    <meta name="description" content="专业的在线电商网">
    <!-- 网站简介 -->
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <link rel="stylesheet" href="css/comoon公共样式.css">
    <!-- head 和footer公共样式 -->
    <link rel="stylesheet" href="css/base初始化.css">
    <!-- 初始化 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- index首页样式 -->
    <!-- 引入personal 个人中心 Css样式 -->
    <link rel="stylesheet" href="./css/personal.css">
</head>

<body>

    <!-- 引入公共样式 -->
    <!-- head  头部的 -->
    <div class="head">
        <div class="head_nav">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#" class="iphone"></a></li>

            </ul>
        </div>
    </div>
    <!-- top顶部导航 -->
    <div class="top w">
        <div class="logo">
            <img src="./images/logo.png" alt="">
        </div>
        <div class="top_nav">
            <ul>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
                <li><a href="#"></a>首页</li>
            </ul>
            <div class="search">
                <div class="search_icon">
                    <i></i>
                    <div class="txt">
                        <span>搜一搜</span>
                    </div>
                    <div class="shop">
                        <span>99+</span>
                        <!-- 记住这个语法,直接定义一个sapan ,然后定义样式即可 -->
                        <!-- 布局始终是盒子套盒子!!!!!!!!!!!!1,摆到正确的位子即可! -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- personal  个人商品中心 start -->
    <section>

        <div class="top_msg">
            <img src="./uploads/图层908.png" alt="">
            <div class="user">
                <i class="pic">
                    <img src="./uploads/avatar_1.png" alt="">
                </i>
                <span>London_boy</span>
            </div>
            <div class="msg_nav">
                <ul>
                    <li><a href="#">
                            <div class="txt">
                                <h4>会员中心</h4>
                                <span></span>
                            </div>
                        </a>
                    </li>
                    <li><a href="#">
                            <div class="txt">
                                <h4>会员中心</h4>
                                <span></span>
                            </div>
                        </a>
                    </li>

                    <li><a href="#">
                            <div class="txt">
                                <h4>会员中心</h4>
                                <span></span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>

            <!-- order 订单页 -->
            <div class="order">
                <div class="order_hd">
                    <span>我的订单</span>
                    <a href="#">查看更多<i>&gt;</i></a>
                </div>
            </div>
            <div class="order_bd">
                <div class="bd_item">
                    <div class="list">
                        <div class="goods">
                            <img src="./uploads/history_goods_1.jpg" alt="">
                            <h4>拉夫劳伦t恤男正品圆领短袖...</h4>
                            <span>颜色：白色 尺码：M 数量：1</span>
                            <h5>待付款</h5>
                        </div>
                    </div>
                    <div class="price">
                        <span>$999</span>
                        <h4>(含运费：¥10.00元）</h4>
                        <h3>在线支付</h3>
                    </div>
                    <div class="pay">
                        <span>立即付款</span>
                        <h4>查看详情</h4>
                        <h6>取消订单</h6>
                    </div>
                </div>
                <!-- order 订单页 end  -->

                <!-- order 订单页 -->
                <div class="order2">
                    <div class="order_hd">
                        <span>我的订单</span>
                        <a href="#">查看更多<i>&gt;</i></a>
                    </div>
                </div>
                <div class="order_bd">
                    <div class="bd_item">
                        <div class="list">
                            <div class="goods">
                                <img src="./uploads/history_goods_2.jpg" alt="">
                                <h4>拉夫劳伦t恤男正品圆领短袖...</h4>
                                <span>颜色：白色 尺码：M 数量：1</span>
                                <h5>待付款</h5>
                            </div>
                        </div>
                        <div class="price">
                            <span>$999</span>
                            <h4>(含运费：¥10.00元）</h4>
                            <h3>在线支付</h3>
                        </div>
                        <div class="pay">
                            <span>确认收货</span>
                            <h4>查看详情</h4>
                            <h6>再次购买</h6>
                        </div>
                    </div>

                </div>
            </div>

            <!-- collect 收藏页面 start -->
            <div class="collect">
                <div class="collect_hd">
                    <span>我的收藏</span>
                    <a href="#">查看更多<i>&gt;</i></a>
                </div>
                <div class="goods_2">
                    <ul>

                        <li><a href="#"><img src="./uploads/图层1367.png" alt=""></a>
                            <span>沙宣经典洗护套装
                                750ml送200ml
                                洗护用品 </span>
                            <h4>￥999</h4>

                        </li>

                        <li><a href="#"><img src="./uploads/图层1367.png" alt=""></a>
                            <span>沙宣经典洗护套装
                                750ml送200ml
                                洗护用品 </span>
                            <h4>￥999</h4>

                        </li>


                        <li><a href="#"><img src="./uploads/图层1367.png" alt=""></a>
                            <span>沙宣经典洗护套装
                                750ml送200ml
                                洗护用品 </span>
                            <h4>￥999</h4>

                        </li>

                        <li><a href="#"><img src="./uploads/图层1367.png" alt=""></a>
                            <span>沙宣经典洗护套装
                                750ml送200ml
                                洗护用品 </span>
                            <h4>￥999</h4>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- collect 收藏页面 end-->

            <!-- history 历史页面 start -->
            <div class="collect">
                <div class="collect_hd">
                    <span>我的足迹</span>

                </div>
                <div class="goods_2">
                    <ul>
                        <li><a href="#"><img src="./uploads/图层1367.png" alt=""></a>
                            <span>沙宣经典洗护套装
                                750ml送200ml
                                洗护用品 </span>
                            <h4>￥999</h4>

                        </li>

                        <li><a href="#"><img src="./uploads/图层1367.png" alt=""></a>
                            <span>沙宣经典洗护套装
                                750ml送200ml
                                洗护用品 </span>
                            <h4>￥999</h4>

                        </li>


                        <li><a href="#"><img src="./uploads/图层1367.png" alt=""></a>
                            <span>沙宣经典洗护套装
                                750ml送200ml
                                洗护用品 </span>
                            <h4>￥999</h4>

                        </li>
                        <li><a href="#"><img src="./uploads/图层1367.png" alt=""></a>
                            <span>沙宣经典洗护套装
                                750ml送200ml
                                洗护用品 </span>
                            <h4>￥999</h4>
                        </li>
                    </ul>
                </div>

            </div>
            <!-- history 历史页面  end -->

        </div>
        <!-- personal  个人商品中心 end -->




        <!-- aside 侧边栏  start-->
        <div class="aside w">
            <div class="aisde_item">
                <ul>
                    <li><a href="#">我的账户</a> </li>
                    <li>
                        <span></span><a href="#" style="color: #5eb69c;">个人中心</a>
                    </li>
                    <li><a href="#">消息通知</a> </li>
                    <li><a href="#">个人信息</a> </li>
                    <li><a href="#">安全设置</a> </li>
                    <li><a href="#">地址管理</a> </li>
                    <li><a href="#">我的积分</a> </li>
                    <li><a href="#">我的足迹</a> </li>
                    <li><a href="#">邀请有礼</a> </li>
                    <li><a href="#">幸运抽奖</a> </li>
                </ul>

            </div>
            <div class="aisde_item2">
                <ul>
                    <li><a href="#">我的账户</a> </li>
                    <li><a href="#">个人中心</a> </li>
                    <li><a href="#">消息通知</a> </li>
                    <li><a href="#">个人信息</a> </li>
                    <li><a href="#">安全设置</a> </li>
                    <li><a href="#">地址管理</a> </li>
                </ul>
            </div>
            <div class="aisde_item3">
                <ul>
                    <li><a href="#">我的账户</a> </li>
                    <li><a href="#">个人中心</a> </li>
                    <li><a href="#">消息通知</a> </li>
                    <li><a href="#">个人信息</a> </li>
                </ul>
            </div>
            <div class="aisde_item4">
                <ul>
                    <li><a href="#">我的账户</a> </li>
                    <li><a href="#">个人中心</a> </li>
                    <li><a href="#">消息通知</a> </li>
                </ul>

            </div>
        </div>
        <!-- aside 侧边栏  end-->
    </section>
    <!-- personal  个人商品中心 end -->




 
    <!--  footer 底部公共样式 start -->
    <footer>
        <div class="box w">
            <ul>
                <li>
                    <h3>客户服务</h3>
                    <a href="#">
                        <div class="icon">
                            <i>
                                <span></span>
                                <p>在线客服</p>
                            </i>
                            <i>
                                <span></span>
                                <p>问题反馈</p>
                            </i>

                        </div>
                    </a>
                </li>
                <li>
                    <h3>客户服务</h3>
                    <a href="#">
                        <div class="icon">
                            <i>
                                <span></span>
                                <p>在线客服</p>
                            </i>
                            <i>
                                <span></span>
                                <p>问题反馈</p>
                            </i>
                        </div>
                    </a>
                </li>
                <li>
                    <div class="download">
                        <span>下载APP</span>
                        <div class="icon_item">
                            <i><img src="./uploads/qrcode.png" alt="">
                            </i>
                            <div class="qrcode">
                                <p>扫描二维码</p>
                                <p>立马下载APP</p>
                                <div class="btn">
                                    <a href="#">下载页面</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="connect">
                        <span>服务热线</span>
                        <h4>4000-000-9000 </h4>
                        <p>周一之周日 8:00-18:00</p>

                </li>
            </ul>
        </div>
    </footer>

    <div class="footer">
        <div class="hd w">
            <ul>
                <li>
                    <div class="hd_icon">
                        <i></i>
                        <!-- 如果发现引入的字体图标太大了，肯定是盒子设置太大了 -->
                        <span>价格亲民</span>
                    </div>
                </li>
                <li>
                    <div class="hd_icon">
                        <i></i>
                        <span>价格亲民</span>
                    </div>
                </li>
                <li>
                    <div class="hd_icon">
                        <i></i>
                        <span>价格亲民</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="footer_nav">
            <p>
                <a href="#">关于我们</a>
                <span>|</span> <a href="#">帮助中心</a>
                <span>|</span> <a href="#">售后服务</a>
                <span>|</span> <a href="#">配送与验收</a>
                <span>|</span> <a href="#">商务合作</a>
                <span>|</span> <a href="#">搜索推荐</a>
                <span>|</span> <a href="#">友情链接</a>
                <!-- 直接一个竖线| 加一个a链接即可 无需再书写boder 边框了，这样的书写简洁 -->
            </p>
            <p>CopyRight @ 小兔鲜儿</p>
        </div>
    </div>
    
    <!--  separation 此盒子是用来分割的 -->
   <div class="footer_separation">
    
</div>

</body>
<!-- 底部footer end ！！ -->











</body>